<#import "/spring.ftl" as s>
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <title>菜单管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <#include '../include/baselink.ftl'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
</head>

<body class="dashboard-page">
<#include '../include/skin-toolbox.ftl'>
<#--<!-- Start: Main &ndash;&gt;-->
<div id="main">
<#include '../include/header.ftl'>
<#include '../include/sidebar.ftl'>
    <!-- Start: Content-Wrapper -->
    <section id="content_wrapper">
        <!-- Start: Topbar -->
        <header id="topbar" class="alt">
            <div class="topbar-left">
                <ol class="breadcrumb">
                    <li class="crumb-active">
                        <a href="<@s.url '/'/>">控制台</a>
                    </li>
                    <li class="crumb-icon">
                        <a href="<@s.url '/'/>">
                            <span class="glyphicon glyphicon-home"></span>
                        </a>
                    </li>
                    <li class="crumb-link">
                        系统管理
                    </li>
                    <li class="crumb-trail">菜单管理</li>
                </ol>
            </div>
        </header>
    <#--<!-- End: Topbar &ndash;&gt;-->
    <#--<!-- Begin: Content &ndash;&gt;-->
        <section id="content" class="table-layout animated fadeIn">

            <!-- begin: .tray-left -->
            <div class="tray tray-left tray320" data-tray-height="match">

                <div id="jstree">

                </div>

            </div>
            <!-- end: .tray-left -->

            <!-- begin: .tray-center -->
            <div class="tray tray-center"  >
                <div class="panel" id="spy7" v-if="menuChange.id!=null">
                    <div class="panel-heading">
                        <span class="panel-icon"><i class="fa fa-table"></i></span>
                        <span class="panel-title">菜单详细信息</span>
                    </div>
                    <div class="panel-body">
                        <form class="form-horizontal" role="form">
                            <div class="form-group">
                                <label class="col-lg-3 control-label" for="inputDefault">菜单类型</label>
                                <div class="bs-component col-lg-8">
                                    <select  v-model="menuChange.type" v-on:change="infoChange()" class="form-control">
                                        <option v-bind:value="type.id" v-for="type in menuType">{{ type.name }}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label v-if="menuChange.type != 5" class="col-lg-3 control-label" for="inputDefault">菜单名称</label>
                                <label v-if="menuChange.type == 5" class="col-lg-3 control-label" for="inputDefault">权限名称</label>

                                <div v-if="menuChange.type != 5" class="col-lg-8">
                                    <div class="bs-component">
                                        <input class="form-control" type="text" v-on:change="infoChange()"  placeholder="菜单名称" v-model="menuChange.name">
                                    </div>
                                </div>

                                <div v-if="menuChange.type == 5" class="col-lg-8">
                                    <div class="bs-component">
                                        <input class="form-control" type="text" v-on:change="infoChange()"  placeholder="请输入权限名称,如取消订单" v-model="menuChange.name">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-3 control-label" for="inputDefault">同级顺序</label>
                                <div class="col-lg-8">
                                    <div class="bs-component">
                                        <input id="inputDefault" class="form-control" type="number" v-on:change="infoChange()"  placeholder="顺序" v-model="menuChange.viewOrder">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group" v-if="menuChange.type != 0 || menuChange.type != 3">
                                <label v-if="menuChange.type != 5" class="col-lg-3 control-label" for="inputDefault">菜单路径</label>
                                <label v-if="menuChange.type == 5" class="col-lg-3 control-label" for="inputDefault">权限编码</label>
                                <div v-if="menuChange.type != 5" class="col-lg-8">
                                    <div class="bs-component">
                                        <input id="inputDefault" class="form-control" type="text" v-on:change="infoChange()" placeholder="菜单路径" v-model="menuChange.path">
                                    </div>
                                </div>
                                <div v-if="menuChange.type == 5" class="col-lg-8">
                                    <div class="bs-component">
                                        <input id="inputDefault" class="form-control" type="text" v-on:change="infoChange()" placeholder="请输入权限编码,如CancelOrder" v-model="menuChange.path">
                                    </div>
                                </div>
                            </div>
                            <div v-if="menuChange.type != 5" class="form-group">
                                <label class="col-lg-3 control-label">系统标签:</label>
                                <div class="col-lg-8">
                                    <div class="bs-component">
                                        <input class="form-control" type="text" v-on:change="infoChange()" placeholder="系统标识" v-model="menuChange.app">
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="panel-footer">
                        <button type="button" class="btn btn-primary" v-on:click="save()" >确认</button>
                    </div>
                </div>

            </div>
        </section>

    <#--<!-- End: Content &ndash;&gt;-->
    <#--<#include '../include/footer.ftl' />-->
    <#--</section>-->
        <!-- End: Content-Wrapper -->


</div>
<!-- Datatables -->

<#include '../include/footer_js.ftl'/>

<script>
    var menuTree;

    $(function () {
        $('#jstree').jstree({
            core: {
                check_callback: true,
                multiple:false,
                data: function (node, cb) {
                    if (node.id === "#") {
                        querySubmenu({id:0},cb);
                    } else {
                        querySubmenu(node,cb);
                    }
                }
            },
            plugins: ["contextmenu"],
            contextmenu:{
                items: contextMenus()
            }
        });

        $('#jstree').on("select_node.jstree",function (node,select,event) {
            var oldId = app.$data.menu.id;
            var hasChange = app.$data.change;
            var hasCreate = app.$data.createChange;
            var deletedCheck = hasCreate || hasChange;
            if (deletedCheck){
                swal(
                        {
                            title: "确定放弃修改？",
                            showCancelButton: true,
                            confirmButtonText:"放弃",
                            cancelButtonText:"继续修改",
                        },
                        function (isConfirm) {
                            var newMenu = menuTree.get_node(oldId);
                            if(isConfirm){
                                if (hasCreate){
                                    menuTree.delete_node(newMenu);
                                    app.$data.change = false;
                                    app.$data.createChange = false;
                                    app.clear();
                                }else {
                                    app.$data.change = false;
                                }
                                menuTree.activate_node(select.node.id);
                                app.$data.menuChange.name = app.$data.menu.name;
                                app.$data.menuChange.path = app.$data.menu.path;
                                app.$data.menuChange.type = app.$data.menu.type;
                                app.$data.menuChange.viewOrder = app.$data.menu.viewOrder;
                                app.$data.menuChange.app = app.$data.menu.app;

                            }else {
                                menuTree.activate_node(newMenu);
                            }
                        }
                );
            }else {
                var id = select.node.data == null ? select.node.id : select.node.data.id;
                var name = select.node.data == null ? select.node.text : select.node.data.name;
                var path = select.node.data == null ? null : select.node.data.path;
                var parentId = select.node.data == null ? select.node.parent : select.node.data.parentId;
                var type = select.node.data == null ? null : select.node.data.type;
                var viewOrder = select.node.data == null ? null : select.node.data.viewOrder;
                var menuApp = select.node.data == null ? null : select.node.data.app;

                app.$data.menu.id = id;
                app.$data.menu.name = name;
                app.$data.menu.path = path;
                app.$data.menu.parentId = parentId;
                app.$data.menu.type = type;
                app.$data.menu.viewOrder = viewOrder;
                app.$data.menu.app = menuApp;

                app.$data.menuChange.id = id;
                app.$data.menuChange.name = name;
                app.$data.menuChange.path = path;
                app.$data.menuChange.parentId = parentId;
                app.$data.menuChange.type = type===null?1:type;
                app.$data.menuChange.viewOrder = viewOrder===null?0:viewOrder;
                app.$data.menuChange.app = menuApp;

            }


        });

        function contextMenus() {
            var items = {
                "create" : {
                    "separator_before"  : false,
                    "separator_after"   : true,
                    "label"             : "创建菜单",
                    "action"            : function (data) {crateMenu(data)}
                },
                "remove" : {
                    "separator_before"  : false,
                    "icon"              : false,
                    "separator_after"   : false,
                    "label"             : "删除菜单",
                    "action"            : function (data) {removeDepartment(data)}
                }
            };
            return items;
        }

        menuTree = $('#jstree').jstree(true);

    });

    function querySubmenu(node,cb) {
        $.ajax({
            type: "POST",
            url: contentPath + "/api/view/sys/menu/childs/" + node.id,
            beforeSend: function (xhr) {
                xhr.setRequestHeader("Content-type", "application/json;charset=UTF-8");
            },
            dataType: "json",
            data: null,
            success: function (data) {

                var result = data.data;
                var nodes = [];
                $.each(result, function (i, e) {
                    var node = {
                        id: e.id,
                        text: e.name,
                        data:{
                            id:e.id,
                            name:e.name,
                            parentId:e.parentId,
                            path:e.path,
                            type:e.type,
                            viewOrder:e.viewOrder,
                            app: e.app
                        },
                        children:true
                    };
                    nodes.push(node);

                    menuTree.open_all();
                });
                cb.call(this, nodes);

            },
            error:function (data) {
                sweetAlert(data.responseJSON.msg);
            }
        });
    }

    function crateMenu(data) {
        var hasChange = app.$data.change || app.$data.createChange;
        if (hasChange){
            sweetAlert("请先保存上次修改");
        }else {
            var id = app.$data.menu.id;
            var obj = menuTree.get_node(id);

            menuTree.create_node(obj, {}, "last", function (new_node) {
                try {
                    menuTree.activate_node(new_node);
                    menuTree.get_node(new_node).data = {};
                    app.$data.createChange = true;
                } catch (ex) {
                    setTimeout(function () {
                        menuTree.activate_node(new_node);
                        menuTree.get_node(new_node).data = {};
                        app.$data.createChange = true;
                    }, 0);
                }
            });
        }
    }

    function removeDepartment(data) {
        app.deleted();
    }


    var app = new Vue({
        el: '#main',
        data: {
            createChange:false,
            change:false,
            menu:{
                id:null,
                name:null,
                path:null,
                parentId:null,
                type:null,
                viewOrder:null,
                app:null
            },
            menuChange:{
                id:null,
                name:null,
                path:null,
                parentId:null,
                type:null,
                app:null,
                viewOrder:null
            },
            menuType:[
                {
                    id:0,
                    name:"标签,在菜单显示"
                },{
                    id:2,
                    name:"分组,下面有子菜单，在菜单显示"
                },{
                    id:1,
                    name:"菜单,在菜单显示"
                },{
                    id:5,
                    name:"操作权限, 一般为页面内按钮权限"
                }
            ]
        },
        watch:{
            "menu.name":function () {
                //同步树显示信息
                menuTree.set_text(this.menu.id,this.menu.name);
                menuTree.get_node(this.menu.id).data.name = this.menu.name;
            },"menu.path":function () {
                menuTree.get_node(this.menu.id).data.path = this.menu.path;
            },"menu.id":function () {
                menuTree.get_node(this.menu.id).data.id = this.menu.id;
            },"menu.parentId":function () {
                menuTree.get_node(this.menu.id).data.parentId = this.menu.parentId;
            }
            ,"menu.type":function () {
                menuTree.get_node(this.menu.id).data.type = this.menu.type;
            },"menu.viewOrder":function () {
                menuTree.get_node(this.menu.id).data.viewOrder = this.menu.viewOrder;
            },"menu.app":function() {
                menuTree.get_node(this.menu.id).data.app = this.menu.app;
            }
        },
        created:function(){
            this.findAllMappings();
        },
        methods: {
            findAllMappings: function(){
                this.$http.post(contentPath+"/api/sys/mappings", null).then(
                    function(resp){
                        console.log(resp);
                    },
                    function(error){

                    }
                )
            },
            save:function(){
                if (this.createChange){
                    this.add();
                    return;
                }
                if (this.change){
                    this.update();
                    return;
                }

            },
            add:function () {
                var savaReq = {
                    path:this.menuChange.path,
                    parentId:this.menu.parentId,
                    name:this.menuChange.name,
                    type:this.menuChange.type,
                    viewOrder:this.menuChange.viewOrder,
                    app:this.menuChange.app
                };

                this.$http.post(contentPath+"/api/view/sys/menu/save",savaReq)
                        .then(function (response) {
                            this.change = false;
                            this.createChange = false;

                            var createMenu = menuTree.get_node(this.menu.id);
                            menuTree.set_id(createMenu,response.data.data);
                            this.menu.id = response.data.data;
                            this.menuChange.id = response.data.data;
                            this.menu.name = this.menuChange.name;
                            this.menu.path = this.menuChange.path;
                            this.menu.type = this.menuChange.type;
                            this.menu.viewOrder = this.menuChange.viewOrder;
                            this.menu.app = this.menuChange.app;

                            sweetAlert("添加成功")
                        },function(error){
                            sweetAlert(error.body.msg);
                        });
            },
            update:function () {
                var info = {
                    id:this.menuChange.id,
                    name:this.menuChange.name,
                    path:this.menuChange.path,
                    type:this.menuChange.type,
                    viewOrder:this.menuChange.viewOrder,
                    app:this.menuChange.app
                };
                this.$http.post(contentPath+"/api/view/sys/menu/update",info)
                        .then(function (response) {
                            this.change = false;

                            this.menu.name = this.menuChange.name;
                            this.menu.path = this.menuChange.path;
                            this.menu.type = this.menuChange.type;
                            this.menu.viewOrder = this.menuChange.viewOrder;
                            this.menu.app = this.menuChange.app;

                            sweetAlert("修改成功")
                        },function(error){
                            sweetAlert(error.body.msg);
                        });
            },
            deleted:function () {
                var vueApp = this;
                swal(
                        {
                            title: "确定删除？",
                            showCancelButton: true,
                            showLoaderOnConfirm: true,
                            confirmButtonText:"删除",
                            cancelButtonText:"取消"
                        },
                        function () {
                            vueApp.$http.post(contentPath+"/api/view/sys/menu/delete/"+vueApp.menu.id)
                                    .then(function (response) {
                                        var deletedMenu = menuTree.get_node(vueApp.menu.id);

                                        if(menuTree.is_selected(deletedMenu)) {
                                            menuTree.delete_node(menuTree.get_selected());
                                        }
                                        else {
                                            menuTree.delete_node(deletedMenu);
                                        }
                                        this.clear();
                                        menuTree.refresh();
                                    },function(error){
                                        sweetAlert(error.body.msg);
                                    });
                        }
                );

            },
            infoChange:function () {
                if (this.menu.path != this.menuChange.path
                        || this.menu.type != this.menuChange.type
                        || this.menu.viewOrder !=  this.menuChange.viewOrder
                        || this.menu.name != this.menuChange.name
                        || this.menu.app != this.menuChange.app){
                    this.change = true;
                }else {
                    this.change = false;
                }
            },
            clear:function () {
                this.menuChange.id = null;
                this.menuChange.name = null;
                this.menuChange.path = null;
                this.menuChange.parentId = null;
                this.menuChange.order = null;
                this.menuChange.type = null;
                this.menuChange.viewOrder = null;
                this.menuChange.app = null;
            }
        }
    });

</script>

</body>

</html>
